<template>
	<view class="card">
		<view class="ul">
			<view class="li" v-for="(item,index) in treeData" :key="index">
				<view class="item" :class="{'line-left': index !== 0, 'line-right': index != treeData.length - 1}">
					<view class="item-name" 
						:class="{'line-bottom':item.children && item.children.length > 0,'line-top':!treeFirst}">
						<view class="content">
							<view class="img" v-if="item.id!=-1" >
								<image   style="width:100%;height:100%;border-radius:50%" :src="sheep.$url.cdn(item.avatar)" ></image>
								<view class="name">
									<view>{{item.role}}</view>
									<view class="ss-line-1">{{item.nickname}}</view>
									<view v-if="item?.children?.length>0&&!treeFirst">
										<image v-if="(deep>2)" class="btn" @tap="delItem(item)" style="width:32rpx;height:32rpx" :src="sheep.$url.cdn('/storage/default/20250314/af1b381a8be29acceb295f2896aa5a05.png')" ></image>
									</view>
									
									<view v-else-if="item.children_count>0" class="add_line">
										<button class=" ss-reset-button btn btn-add add_line" @tap="addItem(item)">查看下级</button>
									</view>
								</view>
							</view>
							<button v-if="item.id==-1" class="ss-reset-button btn btn-add" @tap="showMore(parent)">查看更多</button>
							<!-- <button class="btn" >删除当前</button> -->
							
						</view>
					</view>
				</view>
				<treeList v-if="item.children && item.children.length > 0" :tree-data="item.children" :parent="item" :deep="deep+1"/>
			</view>
		</view>
	</view>
</template>

<script setup name="tree-list">
	import sheep from '@/sheep';
	import treeList from './tree-list';
	import { inject } from 'vue'
	const delItem = inject('delItem')
	const addItem = inject('addItem')
	const showMore = inject('showMore')
	defineProps(['treeData', 'treeFirst','parent','userId','deep'])
	function handleClick(item){
		if(!item.ischeck){
			addItem(item)
			item.ischeck=true
		}else{
			delItem(item)
			item.ischeck=false
		}
	}
	
</script>

<style lang="scss" scoped>
	$line-length: 20px; //线长
	$spacing: 20px; //间距
	$extend: calc(#{$spacing}); //延长线

	// 线样式
	@mixin line {
		content: "";
		display: block;
		width: 4rpx;
		height: $line-length;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		background: linear-gradient(286deg, #05D5BF 0%, #06C2AE 50%, #A2CEFD 100%);
		// border-image: linear-gradient(286deg, #05D5BF 0%, #06C2AE 50%, #A2CEFD 100%) ;
	}
	
	
	.card {
		transition: all .3s;

		.ul {
			display: flex;
			justify-content: center;
			transition: all .3s;

			.li {
				transition: all .3s;

				.item {
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					transition: all .3s;

					&-name {
						min-width: 60rpx;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: $spacing;
						padding: 0 0 100rpx;
						text-align: center;
						

						.content {
							display: flex;
							flex-direction: column;
							align-items: center;
							.btn-add{
								background: linear-gradient(290deg, #05D5BF 1%, #06C2AE 50%, #A2CEFD 100%);
								font-size:20rpx;
								border-radius: 10rpx;
								color:#fff;
								padding:0 10rpx;
							}
							.btn{
							}
							.img{
								width:120rpx;
								height:120rpx;
								position:relative;
								background: #006CD9;
								border-radius: 50%;
								box-shadow: 0px 5rpx 30rpx 5rpx rgba(0, 0, 0, 0.04);
								.name {
									position:absolute;
									font-size: 24rpx;
									width:160rpx;
									transform:translateX(-20rpx)
								}
							}
							
						}
					}
				}
			}

		}

		// 向下的线
		.line-bottom {
			&::after {
				@include line();
				bottom: -$line-length;
			}
		}

		// 向上的线
		.line-top {
			&::before {
				@include line();
				top: -$line-length;
			}
		}

		// 向左的线
		.line-left {
			&::after {
				@include line();
				width: calc(50% + #{$spacing});
				height: 4rpx;
				left: calc(-50% - #{$extend});
				top: 0;
			}
		}

		// 向右的线
		.line-right {
			&::before {
				@include line();
				width: calc(50% + #{$spacing});
				height: 4rpx;
				right: calc(-50% - #{$extend});
				top: 0;
			}
		}
	}
	.add_line{
		margin-top:60rpx;
		&::before {
			@include line();
			top:60rpx;
			height: 60rpx;
		}
	}
</style>